<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>DataMgmt UI</title>
    <meta content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link th:href="@{/mgmt/css/pretty-json.css}" rel="stylesheet"/>
    <script th:src="@{/mgmt/js/jquery-1.11.1.min.js}"></script>

    <script th:src="@{/mgmt/js/underscore-min.js}"></script>
    <script th:src="@{/mgmt/js/backbone-min.js}"></script>
    <script th:src="@{/mgmt/js/pretty-json-min.js}"></script>
    <!--    <script th:src="@{/mgmt/js/underscore-min.js}"></script>-->
    <!--    <script th:src="@{/mgmt/js/underscore-min.js}"></script>-->
    <!--    <script type="text/javascript" src="/soof-admin/mgmt/js/backbone-min.js"></script>-->
    <!--    <script type="text/javascript" src="/soof-admin/mgmt/js/pretty-json-min.js"></script>-->
    <!-- just css for this page example -->
    <style type="text/css">
        body {
            width: 700px;
            border-style: none;
            margin-left: auto;
            margin-right: auto;
        }

        textarea {
            width: 600px;
            padding: 4px 7px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
            color: #333;
            margin-bottom: 7px;
        }
    </style>
</head>

<body>
<h1>DataMgmt UI</h1>
<div>
    <textarea id="input" rows="12"></textarea>
</div>
<div>
    <select name="shard">
        <option value="defaultShard" selected>defaultShard</option>
        <option value="shard0">shard0</option>
        <option value="shard1">shard1</option>
        <option value="shard2">shard2</option>
        <option value="shard3">shard3</option>
        <option value="shard4">shard4</option>
        <option value="shard5">shard5</option>
        <option value="shard6">shard6</option>
        <option value="shard7">shard7</option>
        <option value="shard8">shard8</option>
        <option value="shard9">shard9</option>
        <option value="shard10">shard10</option>
        <option value="shard11">shard11</option>
        <option value="shard12">shard12</option>
        <option value="shard13">shard13</option>
        <option value="shard14">shard14</option>
        <option value="shard15">shard15</option>
    </select>
    <button id="action">执行</button>
    <button id="clear">清除</button>
</div>
<div>
    <span id="result"></span>
</div>
<script>
    $(document).ready(function () {
        var el = {
            btnAction: $('#action'),
            btnClear: $('#clear'),
            input: $('#input'),
            result: $('#result'),
            shard: $("select[name='shard']")
        };
        el.btnAction.on('click', function () {
            $.ajax({
                type: "post",
                url: "/mgmt/sql/select.do?shard=" + el.shard.val(),
                data: el.input.val(),
                dataType: "json",
                contentType: "application/sql;charset=utf-8",
                success: function (data) {
                    var node = new PrettyJSON.view.Node({
                        el: el.result,
                        data: data,
                        dateFormat: "DD/MM/YYYY - HH24:MI:SS"
                    });
                }
            });
        });
        el.btnClear.on('click', function () {
            el.input.val('');
            el.result.html('');
        });
    });
</script>
</body>
</html>
